<!--
 * @Author: daidai
 * @Date: 2022-03-01 09:43:37
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-09 11:40:22
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-bottom.vue
-->
<template>
	<div v-if="pageflag" class="left_boottom_wrap beautify-scroll-def container">
		<div class="wrapper" v-if="!echartsVisible">
			<div class="item" v-for="(item, index) in weatherList" :key="index" @click="itemClick(item)">
				<span class="span_name">{{ item.name }}</span>
				<span class="span_data">
					{{ item.sensor }}
					<i>{{ item.unit }}</i>
				</span>
				<img class="images" :src="item.img" />
			</div>
		</div>
		<div class="echarts" v-else>
			<el-select v-model="curTimeType" value-key="value" size="small" @change="timehange($event)"
				:popper-append-to-body="false">
				<el-option v-for="(item, index) in timeType" :key="index" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
			<button class="go-back" @click="goBack()">返回</button>
			<Echart :options="options" id="echart"></Echart>
		</div>
	</div>
	<Reacquire v-else @onclick="getData" style="line-height: 200px">
		重新获取
	</Reacquire>
</template>

<script>
	import { currentGET } from 'api/modules'
	import station from './station.js';
	export default {
		data() {
			return {
				weatherList: [],
				pageflag: false,
				echartsVisible: false,
				options: {},
				timeType: [{
						label: '今天',
						value: 'day'
					},
					{
						label: '一周',
						value: 'week'
					},
					{
						label: '一月',
						value: 'month'
					}
				],
				curDeviceId: null,
				curDate: null,
				curTimeType: 'day',
				curTitle: null,
				deviceWeather: {},
				stationId: 5605,
			};
		},
		computed: {},
		created() {
			this.getData()
			station.$on('stationId', val => {
				this.stationId = val;
				this.option = {};
				this.getData();
			})
		},
		mounted() {},
		beforeDestroy() {
			station.$off('stationId');
		},
		methods: {
			getData() {
				currentGET("weather", {
					stationId: this.stationId
				}).then((res) => {
					if (res.flag) {
						this.pageflag = true
						this.weatherList = res.data;
					} else {
						this.pageflag = false;
						this.$Message({
							text: res.msg,
							type: "warning",
						});
					}
				});
			},
			itemClick(data) {
				this.curDeviceId = data.id;
				this.curDate = data.sensorDate;
				this.curTitle = `${data.name}(${data.unit})`;
				this.getEchart();
			},
			getEchart() {
				currentGET("deviceWeather", {
					deviceId: this.curDeviceId,
					curDate: this.curDate,
					timeType: this.curTimeType
				}).then((res) => {
					if (res.flag) {
						this.echartsVisible = true
						this.deviceWeather = res.data;
						this.initEchart(res.data.xData, res.data.yData);
					} else {
						this.echartsVisible = false;
						this.$Message({
							text: res.msg,
							type: "warning",
						});
					}
				});
			},
			initEchart(xData, yData) {
				this.options = {
					xAxis: {
						type: "category",
						data: xData,
						boundaryGap: false, // 不留白，从原点开始
						splitLine: {
							show: true,
							lineStyle: {
								color: "rgba(31,99,163,.2)",
							},
						},
						axisLine: {
							// show:false,
							lineStyle: {
								color: "rgba(31,99,163,.1)",
							},
						},
						axisLabel: {
							color: "#7EB7FD",
							fontWeight: "500",
						},
					},
					yAxis: {
						type: "value",
						name: this.curTitle,
						nameTextStyle: {
							color: "#7EB7FD",
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: "rgba(31,99,163,.2)",
							},
						},
						axisLine: {
							lineStyle: {
								color: "rgba(31,99,163,.1)",
							},
						},
						axisLabel: {
							color: "#7EB7FD",
							fontWeight: "500",
						},
					},
					tooltip: {
						trigger: "axis",
						backgroundColor: "rgba(0,0,0,.6)",
						borderColor: "rgba(147, 235, 248, .8)",
						textStyle: {
							color: "#FFF",
						},
					},
					grid: {
						//布局
						show: true,
						left: "15px",
						right: "10px",
						bottom: "10px",
						top: "38px",
						containLabel: true,
						borderColor: "#1F63A3",
					},
					series: [{
						data: yData,
						type: "line",
						smooth: true,
						symbol: "none", //去除点
						color: "rgba(252,144,16,.7)",
					}],
				};
			},
			goBack() {
				this.echartsVisible = false;
				this.curTimeType = 'day';
			},
			timehange(e) {
				this.curTimeType = e;
				this.getEchart();
			}
		},
	};
</script>
<style lang='scss' scoped>
	.left_boottom_wrap {
		overflow: hidden;
		width: 100%;
		height: 100%;
	}

	.container ::v-deep {
		height: 100%;

		>.wrapper {
			height: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			// border: 1px solid #000;
			padding-top: 8px;

			>.item {
				width: 33%;
				height: 75px;
				cursor: pointer;
				background-color: rgba(31, 99, 163, .2);
				border-radius: 5px;
				position: relative;

				>.span_name {
					display: block;
					position: absolute;
					font-size: 16px;
					color: #bbb;
					top: 5%;
					left: 10%;
				}

				>.span_data {
					display: block;
					position: absolute;
					top: 40%;
					left: 10%;
					color: #06f18d;
					// font-size: 30px;
					font-size: 20px;
					font-weight: bold;
					z-index: 2;

					//单位名称
					>i {
						font-size: 14px;
						font-weight: 400;
						font-style: normal;
					}
				}

				>.images {
					width: 20px;
					height: 20px;
					display: block;
					position: absolute;
					top: 48px;
					// left: auto;
					right: 2px;
					// bottom: 10px;
				}
			}
		}

		.echarts {
			width: 100%;
			height: 100%;

			>.go-back {
				position: absolute;
				right: 10px;
				top: 15px;
				width: 50px;
				height: 30px;
				line-height: 30px;
				font-size: 14px;
				color: #fff;
				background: #1eb0fc;
				border: 1px solid #1eb0fc;
				border: none;
				border-radius: 3px;
				cursor: pointer;
			}

			>.el-select {
				width: 80px;
				position: absolute;
				right: 80px;
				top: 15px;

				.el-input {
					input {
						border-color: #7EB7FD;
						color: #7EB7FD;
					}
				}

				/**修改边框和字体颜色 */
				.el-input__inner {
					background-color: transparent;
					border-color: #7EB7FD;
				}

				//下拉框
				.el-select-dropdown {
					border: none;
					background-color: rgba(1, 28, 82, 0.8);
				}

				//输入框
				.el-input__inner {
					color: #eee;
					border-color: #00fff6;
					background-color: rgba(1, 28, 82, 0.8);
				}

				//聚焦时的样式
				.el-select .el-input.is-focus .el-input__inner {
					border-color: #0B61AA;
					background-color: rgba(1, 28, 82, 0.8);
					color: #00D3E9;
				}

				//下拉框选中
				.el-select-dropdown__item {
					color: #eee;
				}

				//鼠标经过下拉框
				.el-select-dropdown__item.hover,
				.el-select-dropdown__item:hover {
					color: #00D3E9;
					background-color: #0F3360;
				}
			}
		}
	}
</style>
